<template>
  <doc-alert title="地区 & IP" url="https://doc.krcorecms.com/area-and-ip/" />

  <!-- 操作栏 -->
  <ContentWrap>
    <el-button type="primary" plain @click="openForm()">
      <Icon icon="ep:plus" class="mr-5px" /> IP 查询
    </el-button>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :default-expand-all="isExpandAll"
              :show-overflow-tooltip="true" row-key="id">
      <el-table-column label="类型名称" align="center" prop="id" />
      <el-table-column label="主键编号" align="center" prop="name" />
      <el-table-column label="是否可见" align="center" prop="status">
        <template #default="{ row }">
          <el-switch :value="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"
                     inline-prompt @click="handleStatusChange(row)" />
        </template>
      </el-table-column>
    </el-table>
<!--    <div style="width: 100%; height: 700px">-->
<!--      &lt;!&ndash; AutoResizer 自动调节大小 &ndash;&gt;-->
<!--      <el-auto-resizer>-->
<!--        <template #default="{ height, width }">-->
<!--          &lt;!&ndash; Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 &ndash;&gt;-->
<!--          <el-table-v2 :columns="columns" :data="list" :width="width" :height="height" expand-column-key="id"/>-->
<!--        </template>-->
<!--      </el-auto-resizer>-->
<!--    </div>-->
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <AreaForm ref="formRef" />
</template>
<script setup lang="tsx">
import type { Column } from 'element-plus'
import AreaForm from './AreaForm.vue'
import * as AreaApi from '@/api/system/area'
import {SupplyTypeApi} from "@/api/wine/supplytype";
import {handleTree} from "@/utils/tree";
import {startUsing} from "@/api/system/area";

defineOptions({ name: 'SystemArea' })

// 表格的 column 字段
const columns: Column[] = [
  {
    dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
    title: '编号', // 显示在单元格表头的文本
    width: 400, // 当前列的宽度，必须设置
    fixed: true, // 是否固定列
    key: 'id' // 树形展开对应的 key
  },
  {
    dataKey: 'name',
    title: '地名',
    width: 200
  }
]
// 表格的数据
const list = ref([])
const loading = ref(true) // 列表的加载中
const message = useMessage() // 消息弹窗
/**
 * 获得数据列表
 */
const getList = async () => {
  loading.value = true
  try {
    list.value = await AreaApi.getAreaTree()

  } finally {
    loading.value = false
  }

}
const handleStatusChange = async (row: any) => {
  try {
    let data = row
    // 二次确认
    const text = data.status == 1 ? '停用' : '启用'
    if (data.status == 1){
      await message.confirm(`确认要${text}"${row.name}"吗？`).then(async (res) => {
        console.log(data)
        await AreaApi.stopUsing(data.id)
        message.success('操作成功')
        // 刷新列表
        await getList()
      }).catch((err) => {
        console.log("err", err);
      })
    }
    else {
      await message.confirm(`确认要${text}"${row.name}"吗？`).then(async (res) => {
        console.log(data)
        await AreaApi.startUsing(data)
        message.success('操作成功')
        // 刷新列表
        await getList()
      }).catch((err) => {
        console.log("err", err);
      })
    }
  } catch {
    // 异常时，需要重置回之前的值
    await getList()
  }
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = () => {
  formRef.value.open()
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
